<template>
  <div>
    {{ pid }}-{{ cid }}

    <el-select v-model="pid" @change="queryCity">
      <el-option :value="-1" label="请选择省份"></el-option>

      <el-option
        v-for="d in plist"
        :value="d.pid"
        :label="d.province"
      ></el-option>
    </el-select>
    <!-- {{ plist }} -->

    <el-select v-model="cid">
      <el-option :value="-1" :label="'请选择城市'"></el-option>
      <el-option v-for="d in clist" :value="d.cid" :label="d.city"></el-option>
    </el-select>

    <!-- {{ clist }} -->
  </div>

  <hr />
  <div
    >省份联动2 {{ hid.province }}-{{ qid.city }}
    <el-select @change="querysss" v-model="hid" value-key="pid">
      <el-option
        v-for="d in hlist"
        :value="d.pid"
        :label="d.province"
      ></el-option>
    </el-select>

    <el-table :data="qlist">
      <el-table-column prop="cid" label="主键"></el-table-column>
      <el-table-column prop="pid" label="所属省份"></el-table-column>
      <el-table-column prop="city" label="城市名字"></el-table-column>
    </el-table>
  </div>

  <hr />

  <div>
  部门联动1
  {{ kept }}-{{ ump}}
    <el-select v-model="kept" @change="querylll">
      <el-option :value="-1" label="请选择部门"></el-option>
      <el-option
        v-for="d in klist"
        :key="d.deptId"
        :value="d.deptId"
        :label="d.deptName"
      ></el-option>
    </el-select>

    <el-select v-model="ump">
      <el-option :value="-1" label="请选择员工"></el-option>
      <el-option
        v-for="d in ulist"
        :value="d.employeeId"
        :label="d.employeeName"
      ></el-option>
    </el-select>
  </div>

 <hr>
  <div>部门联动2 {{ dept.deptName }}-{{ emp.employeeName }}

    <el-select @change="queryEmployee" v-model="dept" value-key="deptId">
      <el-option v-for="d in dlist" :value="d" :label="d.deptName"></el-option>
    </el-select>

    <el-table :data="elist">
      <el-table-column prop="employeeId" label="员工编号"></el-table-column>
      <el-table-column prop="employeeName" label="员工姓名"></el-table-column>
      <el-table-column prop="phone" label="员工电话"></el-table-column>
      <el-table-column label="信息最后修改时间">
        <template #default="scope">
          {{ scope.row.lastupdate }}
        </template>
      </el-table-column>
    </el-table>

    <!-- {{ elist }} -->
  </div>


  <div>
    课程信息1
    <el-select v-model="nid" @change="querymmm">
      <el-option :value="-1" label="请选择编程语言"></el-option>
      <el-option
        v-for="d in nlist"
        :key="d.plid"
        :value="d.plid"
        :label="d.lname"
      ></el-option>
    </el-select>

    <el-select v-model="mid">
      <el-option :value="-1" label="请选择编程语言课程"></el-option>
      <el-option
        v-for="d in mlist"
        :value="d.lcid"
        :label="d.cname"
      ></el-option>
    </el-select>
  </div>


  <div
    >课程信息2
    {{zid.lname}}

    <el-select @change="queryxxx" v-model="zid" value-key="plid">
      <el-option
        v-for="d in zlist"
        :value="d"
        :label="d.lname"
      ></el-option>
    </el-select>

    <el-table :data="xlist">
      <el-table-column prop="lcid" label="主键"></el-table-column>
      <el-table-column prop="plid" label="所属编程语言"></el-table-column>
      <el-table-column prop="cname" label="	课程名称"></el-table-column>
      <el-table-column prop="cinfo" label="	课程信息"></el-table-column>
      <el-table-column label="信息最后修改时间">
        <template #default="scope">
          {{ scope.row.lastupdate }}
        </template>
      </el-table-column>
    </el-table>
  </div>






</template>

<script setup>
import { ref } from 'vue';
import { Api } from '../../script/Api';
import { ElMessage } from 'element-plus';

//#region 省份城市联动
const pid = ref(-1);
const plist = ref([]);

const queryProvince = () => {
  Api.get('/link/provinces', {}, (data) => {
    if (data.success) {
      plist.value = data.data;
    } else {
      ElMessage.error(data.message);
    }
  });
};

const cid = ref(-1);
const clist = ref([]);

const queryCity = () => {
  if (pid.value == -1) {
    clist.value = [];
    cid.value = -1;
    return;
  }
  cid.value = -1;
  // '/link/cities/'+pid.value
  Api.get(`/link/cities/${pid.value}`, {}, (data) => {
    if (data.success) {
      clist.value = data.data;
    } else {
      ElMessage.error(data.message);
    }
  });
};

queryProvince();

//#endregion

//#region 省份联动2
const hid = ref({});
const hlist = ref([]);
const querywww = () => {
  Api.get('/link/provinces', {}, (data) => {
    if (data.success) {
      hlist.value = data.data;
      hid.value = data.data[0].pid;
      querysss();
    } else {
      ElMessage.error(data.message);
    }
  });
};

const qid = ref({});
const qlist = ref([]);

const querysss = () => {
  ///link/cities/'${pid.value}
  Api.get(`/link/cities/${hid.value}`, {}, (data) => {
    if (data.success) {
      qlist.value = data.data;
      //默认选择第一项
      qid.value = data.data[0].cid;
    } else {
      ElMessage.error(data.message);
    }
  });
};

querywww();

//#endregion

//#region 部门联动1
const kept = ref(-1);
const klist = ref([]);

const querykkk = () => {
  Api.get('/link/departments', {}, (data) => {
    if (data.success) {
      klist.value = data.data;
  
      querylll();
    } else {
      ElMessage.error(data.message);
    }
  });
};
const ump = ref(-1);
const ulist = ref([]);

const querylll = () => {
  if (kept.value == -1) {
    ulist.value = [];
    ump.value = -1;
    return;
  }
  ump.value = -1;

  Api.get(`/link/employees/${kept.value}`, {}, (data) => {
    if (data.success) {
      ulist.value = data.data;
      ump.value = data.data[0];
    } else {
      ElMessage.error(data.message);
    }
  });
};

querykkk();

//#endregion


//#region 部门联动2

const dept = ref({});
const dlist = ref([]);

const queryDepy = () => {
  Api.get('/link/departments', {}, (data) => {
    if (data.success) {
      dlist.value = data.data;
      //默认选择第一项
      dept.value = data.data[0];
      queryEmployee();
    } else {
      ElMessage.error(data.message);
    }
  });
};
const emp = ref({});
const elist = ref([]);

const queryEmployee = () => {
  Api.get(`/link/employees/${dept.value.deptId}`, {}, (data) => {
    if (data.success) {
      elist.value = data.data;
      emp.value = data.data[0];
      queryEmployee();
    } else {
      ElMessage.error(data.message);
    }
  });
};

queryDepy();

//#endregion


//#region 课程信息1

const nid = ref(-1);
const nlist = ref([]);
const querynnn = () => {



  Api.get('/link/languages', {}, (data) => {
    if (data.success) {
      nlist.value = data.data;
      querymmm();
    } else {
      ElMessage.error(data.message);
    }
  });
};

const mid = ref(-1);
const mlist = ref([]);

const querymmm = () => {

  if (nid.value == -1) {
    mlist.value = [];
    mid.value = -1;
    return;
  }
  mid.value = -1;


  ///link/cities/'${pid.value}
  Api.get(`/link/cource/${nid.value}`, {}, (data) => {
    if (data.success) {
      mlist.value = data.data;
      //默认选择第一项
      mid.value = data.data[0];
      // queryEmployee();
    } else {
      ElMessage.error(data.message);
    }
  });
};

querynnn();

//#endregion




//#region 课程信息2
const zid = ref({});
const zlist = ref([]);

const queryzzz = () => {
  Api.get('/link/languages', {}, (data) => {
    if (data.success) {
      zlist.value = data.data;
      zid.value = data.data[0];
      queryxxx();
    } else {
      ElMessage.error(data.message);
    }
  });
};

const xid = ref({});
const xlist = ref([]);

const queryxxx = () => {
  ///link/cities/'${pid.value}
  Api.get(`/link/cource/${zid.value.plid}`, {}, (data) => {
    if (data.success) {
      xlist.value = data.data;
      //默认选择第一项
      xid.value = data.data[0];
      
    } else {
      ElMessage.error(data.message);
    }
  });
};

queryzzz();

//#endregion





</script>

<style scoped></style>
